<template>
  <el-card class="container">
    <div class="title"></div>
    <div ref="target" class="box"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
// 渲染图表

/**
 * 初始化 echarts
 */
const target = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(target.value)
  renderBMap()
})
/**
 * 渲染地图数据
 */
const renderBMap = () => {
  const data = []
  for (let i = 0; i < 5; ++i) {
    data.push(Math.round(Math.random() * 200))
  }
  const options = {
    xAxis: {
      max: 'dataMax'
    },
    yAxis: {
      type: 'category',
      data: ['A', 'B', 'C', 'D', 'E'],
      inverse: true,
      animationDuration: 2,
      animationDurationUpdate: 2,
      max: 2 // only the largest 3 bars will be displayed
    },
    series: [
      {
        realtimeSort: true,
        name: '送检单位接收量统计排行榜',
        type: 'bar',
        data: data,
        label: {
          show: true,
          position: 'right',
          valueAnimation: true
        }
      }
    ],
    legend: {
      show: true
    },
    animationDuration: 0,
    animationDurationUpdate: 3000,
    animationEasing: 'linear',
    animationEasingUpdate: 'linear'
  }
  function run() {
    for (let i = 0; i < data.length; ++i) {
      if (Math.random() > 0.9) {
        data[i] += Math.round(Math.random() * 2000)
      } else {
        data[i] += Math.round(Math.random() * 200)
      }
    }
    mChart.setOption({
      series: [
        {
          type: 'bar',
          data
        }
      ]
    })
  }
  setTimeout(function () {
    run()
  }, 0)
  setInterval(function () {
    run()
  }, 3000)
  mChart.setOption(options)
}
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  .title {
    position: absolute;
    top: 28px;
    margin-left: 50%;
    transform: translateX(-50%);
    color: #333;
    font-size: 22px;
    font-weight: bold;
    z-index: 9;
  }
  .box {
    height: 462px;
  }
}
</style>
